<template>
	<view id="caselist">
		<view>
			<text>共上传{{case_total}}个方案</text>
			<view class="rightswitch" :class="{'slectsdon':showststus?'slectsdon': ''}" @click="showtyle">
				<text>{{styletext}}</text>
			<div class="all_type_body" :class="{'openHei' : showststus}" v-show="showststus">
				<ul class="type_body">
					<li class="type_item"
						v-for="(item, index) in listyle" :class="{'active': isactive == index}" :key="index"
						@click="choose(index,item.style_name,item.style_id)">{{ item.style_name }}
					</li>
				</ul>
			</div>
			</view>
		</view>
		<view>
			<ul class="caselist">
				<li v-for="(item, index) in caselist" :key="index">
					<img alt class="case_imgs" @click="casedetail(item.case_relevance_id,item.case_id)" :src="item.image_url">
					<div class="introduce">
						<p class="lititle">{{ item.case_name == ''?'-':item.case_name }}</p>
						<p class="homemsg">
							<span>{{ item.acreage == ''?'-':item.acreage }}&nbsp;|&nbsp;{{ item.room == ''?'-':item.room }}</span>
							<span class="singOn-tag" v-if="item.gift_price">线上预约最高可享价值￥{{ item.gift_price | toFix }}万大礼包</span>
							<span class="singOn-tag" v-else>线上预约享专属大礼包</span>
							<!-- <span class="singOn-tag">线上预约最高可享价值￥2.3万大礼包</span> -->
						</p>
<!-- 						<p class="looks">
						<span>
							<img :src="constant.imgUrl+'design/look.png'" alt class="eye">
							{{ item.view_num }}
						</span>
						<span class="icontwo">
							<i class="iconfont iconfenxiang"/>
							{{ item.share_num }}
						</span>
						</p> -->
					</div>
				</li>
				<uniLoadMore  :loadingType="loadingType"  :status="loading"></uniLoadMore>
			</ul>
		</view>
	</view>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import uniLoadMore from '@/components/uLi-load-more/uLi-load-more'
import { getstyle, getcastlist } from '@/api/case'
export default {
	name: 'caselist',
	components: { // 2注册组件
		uniLoadMore
	},
	data() {
		return {
			constant: this.$constant,
			isactive: 0,
			showststus: false,
			owner_user_id: '',
			listyle: '',
			styletext: '全部',
			case_style: '',
			caselist: [],
			page: 1,
			timer: null,
			case_total: 0,
			loadingType: 0, // 定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
			loading: ''
		}
	},
	mounted() {
		this.getcasestyle()
		this.getcaselists()
	},
	onLoad(options) {
		this.owner_user_id = options.owner_user_id
		uni.showLoading({
			title: '',
			mask: true
		})
	},
	onPullDownRefresh() {
		this.loading = ''
		this.getcaselists()
		uni.showLoading({
			title: '数据刷新中'
		})
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onReachBottom: function() {
		var that = this
		if (that.timer != null) {
			clearTimeout(that.timer)
		}
		that.timer = setTimeout(function() {
			that.getcasemore()
		}, 1000)
		// this.getcasemore();
	},
	methods: {
		showtyle() {
			this.showststus = !this.showststus
		},
		getcasestyle() {
			const params = {
				owner_user_id: this.owner_user_id
			}
			getstyle(params).then(res => {
				if (res.status === 'success') {
					if (res.status == 'success') {
						this.listyle = res.data.style_list
					} else {
						// this.$toast(res.errors.message);
					}
				}
			})
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		hideloading() {
			setTimeout(function() {
				uni.hideLoading()
			}, 500)
		},
		getcaselists() {
			this.page = 1
			this.loadingType = 0
			uni.showNavigationBarLoading()
			const data = {
				owner_user_id: this.owner_user_id,
				case_style: this.case_style,
				limit: 10,
				page: this.page
			}
			getcastlist(data).then(res => {
				if (res.status === 'success') {
					if (res.status == 'success') {
						// this.caselist = res.data.list;
						if (res.data.list.length > 0) {
							this.caselist = res.data.list
							this.case_total = res.data.total
							//  uni.hideNavigationBarLoading()
							//  uni.stopPullDownRefresh()
							//  uni.hideLoading()
							this.loading = ''
						} else {
							this.loading = 'nodata'
						}
					} else {
						this.msg(res.errors.message)
						uni.hideLoading()
						this.loading = 'nodata'
					}
				}
				this.hideloading()
				uni.hideNavigationBarLoading()
				uni.stopPullDownRefresh()
			})
		},
		getcasemore() {
			this.page++
			if (this.loadingType !== 0) { // loadingType!=0;直接返回
				return false
			}
			this.loadingType = 1
			uni.showNavigationBarLoading()
			uni.showLoading({
				title: '数据加载中'
			})
			const data = {
				owner_user_id: this.owner_user_id,
				case_style: this.case_style,
				limit: 10,
				page: this.page
			}
			getcastlist(data).then(res => {
				if (res.status == 'success') {
					this.loadingText = ''
					// this.caselist = res.data.list;
					if (res.data.list.length > 0) {
						this.caselist = this.caselist.concat(res.data.list)
						this.case_total = res.data.total
						this.loadingType = 0
						uni.hideNavigationBarLoading()
					}
					if (res.data.current_page == res.data.last_page) {
						this.loadingType = 2
						this.loading = 'nomore'
					}
				} else {
					uni.hideNavigationBarLoading()
					this.msg(res.message)
				}
				this.hideloading()
			})
		},
		choose(index, style_name, style_id) {
			// 风格选择
			this.isactive = index
			this.showstyle = !this.showstyle
			this.styletext = style_name
			this.case_style = style_id
			this.showststus = false
			this.getcaselists()
			// this.getloadcase();
		},
		casedetail(case_relevance_id, case_id) {
			const query = {
				owner_user_id: this.owner_user_id,
				case_id: case_relevance_id,
				mainId: case_id
			}
			uni.navigateTo({
				url: `/pages/case/casedetail${this.commonJS.queryData(query)}`
			})
			/* uni.navigateTo({
				url: `/pages/case/casedetail?owner_user_id=${this.user_id}&case_id=${case_relevance_id}&mainId=${case_id}`
			})*/
		}

	},
	filters: {
		toFix(val) {
			val = Number(val) / 10000
			return Number(val).toFixed(1)
		}
	}
}
</script>

<style scoped lang="scss">
	#caselist {
		// width: 690px;
		color: #666666;
		padding:0 20px 0px;
		margin: 10px 0 20px;
		// margin-top: 15px;
		.rightswitch {
			float: right;
			margin-right: 20px;
			padding-right: 30px;
			background: url('https://wximg.meijiabang.com/hkds/miniapp/images/design/down.png') right center no-repeat;
			color: #666666;
   border-right: 1rpx;
			/*background-repeat: no-repeat;
			background-position: right center;*/
		}
		.slectsdon {
			background: url('https://wximg.meijiabang.com/hkds/miniapp/images/design/up.png') right center no-repeat;
		}
		.all_type_body {
			position: absolute;
			top: 60px;
			left: 0;
			width: 100%;
			height: auto;
			min-height: 0;
			max-height: 440px;
			overflow-y: auto;
			box-shadow: 0 10px 10px #ddd;
			background-color: #fff;
			z-index: 1;
			.type_body {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding: 30px 15px;
				.type_item {
					width: calc(33.33% - 36px);
					height: 70px;
					line-height: 68px;
					text-align: center;
					border-radius: 50px;
					border: 1px solid #ddd; /*no*/
					margin: 0 15px 30px;
				}
				.type_item.active {
					background-color: #ffd11a;
					border: none;
				}
			}
		}

		.openHei {
			margin-top: -6px;
			color: black;
			animation: maxHeight 0.3s;
			-webkit-animation: maxHeight 0.3s; /* Safari 与 Chrome */
			animation-fill-mode: forwards;
		}
		.caselist {
			width: 100%;
			height: auto;
			/*float: left;*/
			display: block;
			/*margin-left: 5%;*/
			margin-top:30px;

		}

		.caselist li {
			width: 100%;
			height: 580px;
			display: block;
			padding-bottom:60px;
		}
		.singOn-tag {
			color: #fff;
			padding: 2px 10px 4px;
			border-radius: 6px;
			background: linear-gradient(to right, #ff1c31, #f424de);
			position: relative;
			margin-left: 20px;
		}

		// .triangle {
		.singOn-tag::before {
			position: absolute;
			left: -10px;
			top: 10px;
			bottom: 10px;
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-width: 10px 15px 10px 0;
			border-style: solid;
			border-color: transparent #ff1c31 transparent transparent; /*透明 灰 透明 透明 */
			// margin: 40px auto;
		}
		.caselist li:last-child {
			margin-bottom: 80px;
		}

		.caselist li .case_imgs {
			width: 100%;
			height: 484px;
			float: left;
			box-shadow: 0 10rpx 10rpx #eee;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
		}

		.introduce {
			// margin-top: 30px;
			width: 94%;
			height: auto;
			float: left;
			background: #fff;
			box-shadow: 0 10rpx 10rpx #eee;
			border-bottom-left-radius:20px;
			border-bottom-right-radius: 20px;
			padding:20px 20px 1px 20px;
		}

		.introduce p {
			line-height: 25px;
		}

		.introduce .lititle {
			font-size:30px;
			font-weight: bold;
			margin-bottom:10px;
			width: 100%;
			float: left;
			color: #333333;
		}

		.homemsg {
			color: #999999;
			margin-top: 17px;
			font-size: 24px;
			float: left;
			margin-top: 17rpx;
   margin-bottom: 30px;
		}

		.homemsg span {
			// border-right: 0.5px solid #333333; /*no*/
			margin-top: 17rpx;
			// padding:0 15px 0 0;
		}

		.homemsg span:last-child {
			border-right: 0;
		}

		/*.looks{font-size: .1rem;}*/

		.looks {
			height: 35px;
			width: auto;
			display: block;
			line-height: 35px;
			float: left;
			clear: both;
			margin-top: 10px;
		}

		.looks span {
			float: left;
			color: #999999;
			line-height: 35px;
		}
		.icontwo{
			margin-top: -1px;
		}
		.iconfenxiang{
			display: inline;
			font-size: 25px;
			line-height: 30px;
			float: left;
			margin-right: 10px;
		}
		.looks span:nth-child(1) {
			margin-right: 10px;
		}

		.artivle_title {
			width: 114px;
			height: 34px;
			float: left;
			line-height: 34px;
			text-align: center;
			border: 1px solid #eeeeee; /*no*/
			display: -webkit-box;
			word-break: break-all;
			-webkit-line-clamp: 1;
			/*! autoprefixer: off */
			-webkit-box-orient: vertical;
			/* autoprefixer: on */
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.looks span .eye {
			float: left;
			width: 35px;
			height: 35px;
			margin-right: 5px;
		}

		.looks span .fabulous {
			float: left;
			width: 35px;
			height: 35px;
			margin-right: 5px;
		}
		.loading{text-align:center; line-height:80px;}
	}
</style>
